<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        #imgs {
            width: 400px;
            height: 600px;
            left: 0;
            top: 0;
            position: absolute;
        }
        
        #box {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 300px;
            cursor: move;
            background-color: #FEDE4F;
            opacity: .5;
            display: none;
        }
        
        #father {
            position: relative;
            margin-left: 20px;
            width: 400px;
            height: 600px;
        }
        
        #imgbig {
            position: absolute;
            right: 10px;
            top: 0;
            height: 600px;
            width: 1000px;
            overflow: hidden;
            background-color: red;
            display: none;
        }
        
        #imgyd {
            position: absolute;
            width: 2000px;
            height: 1200px;
            top: 0px;
            left: 0px;
        }
    </style>


</head>

<body>
    <div id="father">
        <img id="imgs" src="images/3aa3b1a332986b5744d7bbb4a82cab443cd71a1c.jpg">
        <div id="box"></div>
    </div>

    <div id="imgbig">
        <img id="imgyd" src="images/3aa3b1a332986b5744d7bbb4a82cab443cd71a1c.jpg">
    </div>

</body>
<script>
    var box = document.getElementById('box');
    var father = document.getElementById('father');
    var imgs = document.getElementById('imgs');
    var imgbig = document.getElementById('imgbig');
    var imgyd = document.getElementById('imgyd');
    father.addEventListener('mouseover', function() {
        box.style.display = 'block';
        imgbig.style.display = 'block';

    })

    father.addEventListener('mouseout', function() {
        box.style.display = 'none';
        imgbig.style.display = 'none';
    })

    father.addEventListener('mousemove', function(e) {
        var x = (e.pageX - box.offsetWidth / 2);
        var y = (e.pageY - box.offsetHeight / 2);
        // if (x >= 0 && y >= 0) {
        if (x <= 0) {
            x = 0;
        }
        if (x >= (father.offsetWidth - box.offsetWidth)) {
            x = (father.offsetWidth - box.offsetWidth);
        }

        if (y <= 0) {
            y = 0;
        }
        if (y >= (father.offsetHeight - box.offsetHeight)) {
            y = (father.offsetHeight - box.offsetHeight);
        }
        box.style.left = x + 'px';
        box.style.top = y + 'px';
        // }


        //图片最大移动距离
        var bigMoveWidth = (imgyd.offsetWidth - imgbig.offsetWidth);
        var bigX = (x * bigMoveWidth) / (father.offsetWidth - box.offsetWidth);
        imgyd.style.left = -bigX + 'px';

        var bigMoveHeight = (imgyd.offsetHeight - imgbig.offsetHeight);
        var bigY = (y * bigMoveHeight) / (father.offsetHeight - box.offsetHeight);

        console.log(bigY);
        imgyd.style.top = -bigY + 'px';

    })
</script>

</html>